---
import LinkButton from "./LinkButton.astro";
import socialIcons from "@assets/socialIcons";

const URL = Astro.url;

const shareLinks = [
  {
    name: "Mail",
    href: "mailto:?subject=See%20this%20post&body=",
    linkTitle: `Share this post via email`,
  },
  {
    name: "QQ",
    href: "http://connect.qq.com/widget/shareqq/index.html?title=qqhaoyou&url=",
    linkTitle: `通过 QQ 分享这篇文章`,
  },
  {
    name: "Wechat",
    href: "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=", // 一个在线二维码生成服务的 URL
    linkTitle: `通过微信分享这篇文章`,
  },
  {
    name: "Weibo",
    href: "http://service.weibo.com/share/share.php?url=",
    linkTitle: `分享这篇文章到微博`,
  },
  {
    name: "Zhihu",
    href: "https://www.zhihu.com/share?url=", // 知乎的分享链接
    linkTitle: `分享这篇文章到知乎`,
  },
] as const;
---

<div class={`social-icons`}>
  <span class="italic">快速分享：</span>
  <div class="text-center">
    {
      shareLinks.map(social => (
        <LinkButton
          href={`${social.href + URL}`}
          className="link-button"
          title={social.linkTitle}
        >
          <Fragment set:html={socialIcons[social.name]} />
          <span class="sr-only">{social.linkTitle}</span>
        </LinkButton>
      ))
    }
  </div>
</div>

<style>
  .social-icons {
    @apply flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start;
  }
  .link-button {
    @apply scale-90 p-2 hover:rotate-6 sm:p-1;
  }
</style>
